<template>
    <view :data-theme="themeStyle">
        <view class="store">
            <!-- 店铺信息 -->
            <diy-shop-info :siteId="siteId" :type="0"></diy-shop-info>
            <!-- 店铺描述 -->
            <view class="store-desc">
                <view class="desc-title">店铺介绍</view>
            </view>
            <view class="store-exper">
                <view class="exper-info">
                    <view class="exper-desc font-size-tag color-tip">{{ shopInfo.seo_description }}</view>
                </view>
            </view>
            <view class="store-eval">
                <view class="eval-li">
                    <text class="margin-right">描述相符</text>
                    <view class="line margin-right">
                        <ns-progress :progress="shopDesccredit"></ns-progress>
                    </view>
                    <text class="margin-right grade color-base-text">{{ shopInfo.shop_desccredit }}</text>
                </view>
                <view class="eval-li">
                    <text class="margin-right">服务态度</text>
                    <view class="line margin-right">
                        <ns-progress :progress="shopServicecredit"></ns-progress>
                    </view>
                    <text class="margin-right grade color-base-text">{{ shopInfo.shop_servicecredit }}</text>
                </view>
                <view class="eval-li">
                    <text class="margin-right">物流服务</text>
                    <view class="line margin-right">
                        <ns-progress :progress="shopDeliverycredit"></ns-progress>
                    </view>
                    <text class="margin-right grade color-base-text">{{ shopInfo.shop_deliverycredit }}</text>
                </view>
            </view>

            <!-- 店铺权益 -->
            <block v-if="
					shopInfo.shop_zhping ||
						shopInfo.shop_qtian ||
						shopInfo.shop_erxiaoshi ||
						shopInfo.shop_xiaoxie ||
						shopInfo.shop_baozh ||
						shopInfo.shop_tuihuo ||
						shopInfo.shop_shiyong ||
						shopInfo.shop_shiti
				">
                <view class="store-desc">
                    <view class="desc-title">商家服务</view>
                </view>
                <view class="store-explain">
                    <view class="explain-li" v-if="shopInfo.shop_zhping"><button type="primary" size="mini">正品保障</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_qtian"><button type="primary" size="mini">七天无理由退换</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_erxiaoshi"><button type="primary" size="mini">两小时发货</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_xiaoxie"><button type="primary" size="mini">消协保证</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_baozh"><button type="primary" size="mini">保证服务</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_tuihuo"><button type="primary" size="mini">退货承诺</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_shiyong"><button type="primary" size="mini">试用中心</button></view>
                    <view class="explain-li" v-if="shopInfo.shop_shiti"><button type="primary" size="mini">实体验证</button></view>
                </view>
            </block>

            <!-- 店铺基础信息 -->
            <view class="store-desc">
                <view class="desc-title">店铺信息</view>
            </view>

            <view class="store-base-info">
                <view class="base-li" v-if="shopInfo.site_name">
                    <text>店铺名称</text>
                    <text class="color-sub">{{ shopInfo.site_name }}</text>
                </view>
                <view class="base-li" v-if="shopInfo.telephone">
                    <text>服务电话</text>
                    <text class="color-sub">{{ shopInfo.telephone }}</text>
                </view>
                <view class="base-li" v-if="shopInfo.qq">
                    <text>QQ</text>
                    <text class="color-sub">{{ shopInfo.qq }}</text>
                </view>
                <view class="base-li" v-if="shopInfo.ww">
                    <text>阿里旺旺</text>
                    <text class="color-sub">{{ shopInfo.ww }}</text>
                </view>
                <view class="base-li" v-if="workingDay">
                    <text>工作日</text>
                    <text class="color-sub">{{ workingDay }}</text>
                </view>
                <view class="base-li" @click="$util.redirectTo('/otherpages/shop/certificate/certificate',{site_id:siteId})" v-if="shopInfo.shop_cer">
                    <text>企业资质</text>
                    <view class="color-sub">
                        <image :src="$util.imgPath('zz_icon.png')" mode="aspectFill"></image>
                        <text class="li-more iconfont iconright"></text>
                    </view>
                </view>
            </view>

            <view class="store-desc" v-if="shopInfo.latitude && shopInfo.longitude">
                <view class="desc-title">店铺位置</view>
            </view>
            <view class="store-base-info" v-if="shopInfo.latitude && shopInfo.longitude">
                <map :latitude="Number(shopInfo.latitude)" :markers="markers" :longitude="Number(shopInfo.longitude)"></map>
                <view class="margin-top">
                    <text>{{ shopInfo.full_address }}{{ shopInfo.address }}</text>
                </view>
                <cover-view class="store-map-dark" @click="openMapLg"></cover-view>
            </view>
            <!-- #ifdef H5 -->
            <view class="follow-and-share">
                <view class="follow" @click="openSharePopup()"><text class="iconfont iconiconfontzhizuobiaozhun023130"></text></view>

            </view>
            <!-- #endif -->
            <!-- #ifdef MP || APP-PLUS  -->
            <cover-image class="follow-and-share-img" @click="openSharePopup()" :src="$util.img('upload/uniapp/share.png')">
            </cover-image>
            <!-- #endif -->
            <loading-cover ref="loadingCover"></loading-cover>
            <!-- 海报 -->
            <view @touchmove.prevent.stop>
                <uni-popup ref="posterPopup" type="bottom" class="poster-layer">
                    <template v-if="poster != '-1'">
                        <view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
                            <view class="image-wrap">
                                <image :src="$util.img(poster)" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
                            </view>
                            <!-- #ifdef MP || APP-PLUS  -->
                            <view class="save isPhone" @click="saveGoodsPoster()">保存图片</view>
                            <!-- #endif -->
                            <!-- #ifdef H5 -->
                            <view class="save">长按保存图片</view>
                            <!-- #endif -->
                        </view>
                        <view class="close iconfont iconclose" @click="closePosterPopup()"></view>
                    </template>
                    <view v-else class="msg">{{ posterMsg }}</view>
                </uni-popup>
            </view>

            <!-- 分享弹窗 -->
            <view @touchmove.prevent.stop>
                <uni-popup ref="sharePopup" type="bottom" class="share-popup" @touchmove.stop.prevent="preventHandler">
                    <view class="isPhone">
                        <view class="share-title">分享</view>
                        <view class="share-content">
                            <!-- #ifdef MP -->
                            <view class="share-box">
                                <button class="share-btn" :plain="true" open-type="share">
                                    <view class="iconfont iconiconfenxianggeihaoyou"></view>
                                    <text>分享给好友</text>
                                </button>
                            </view>
                            <!-- #endif -->
                            <view class="share-box" @click.stop="openPosterPopup">
                                <button class="share-btn" :plain="true">
                                    <view class="iconfont iconpengyouquan"></view>
                                    <text>生成分享海报</text>
                                </button>
                            </view>
                        </view>
                        <view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
                    </view>
                </uni-popup>
            </view>
        </view>
    </view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js'
import introduce from '../public/js/introduce.js'
import diyShopInfo from '@/components/diy-shop-info/diy-shop-info.vue'
import nsProgress from '@/components/ns-progress/ns-progress.vue'
import Map from '@/common/js/map/openMap.js'
export default {
	components: {
		diyShopInfo,
		nsProgress
	},
	data() {
		return {
			siteId: 0,
			poster: '-1', // 海报
			posterMsg: '', // 海报错误信息
			posterHeight: 0,
			memberId: 0
		}
	},
	computed: {
		markers() {
			let array = []
			if (this.shopInfo && this.shopInfo.latitude && this.shopInfo.longitude) {
				array.push({
					id: 0,
					latitude: this.shopInfo.latitude,
					longitude: this.shopInfo.longitude,
					iconPath: this.$util.img('upload/uniapp/location.png'),
					width: 25,
					height: 25
				})
			} else {
				array = []
			}
			return array
		}
	},
	mixins: [introduce, globalConfig],
	onLoad(options) {
		if (!options.site_id) {
			this.$util.redirectTo('/otherpages/shop/index/index', {}, 'redirectTo')
			return
		}
		this.siteId = options.site_id
		if (options.scene) {
			var sceneParams = decodeURIComponent(options.scene)
			sceneParams = sceneParams.split('&')
			if (sceneParams.length) {
				sceneParams.forEach(item => {
					if (item.indexOf('site_id') != -1) this.siteId = item.split('-')[1]
					// if (item.indexOf('suid') != -1) uni.setStorageSync('suid', item.split('-')[1]);
				})
			}
		}
		this.getShopInfo()
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh()
	},
	methods: {
		preventHandler() {
			return
		},
		openMapLg() {
			if (!isNaN(Number(this.shopInfo.latitude)) && !isNaN(Number(this.shopInfo.longitude))) {
				Map.openMap(Number(this.shopInfo.latitude), Number(this.shopInfo.longitude), this.shopInfo.site_name, 'gcj02')
			}
		},
		// -------------------------------------分享-------------------------------------
		// 打开分享弹出层
		openSharePopup() {
			this.memberId = uni.getStorageSync('userInfo').member_id
			this.$refs.sharePopup.open()
		},
		// 关闭分享弹出层
		closeSharePopup() {
			this.$refs.sharePopup.close()
		},
		// -------------------------------------海报-------------------------------------

		// 打开海报弹出层
		openPosterPopup() {
			this.getGoodsPoster()
			this.$refs.sharePopup.close()
			this.$refs.posterPopup.open()
			if (this.poster != '-1') {
				setTimeout(() => {
					let view = uni
						.createSelectorQuery()
						.in(this)
						.select('.poster-layer .image-wrap')
					view.fields(
						{
							size: true
						},
						data => {
							let posterWhith = data.width
							let ratio = parseFloat((740 / posterWhith).toFixed(2))
							if (uni.getStorageSync('token')) {
								this.posterHeight = parseInt(1120 / ratio)
							} else {
								this.posterHeight = parseInt(1100 / ratio)
							}
						}
					).exec()
				}, 100)
			}
		},
		// 关闭海报弹出层
		closePosterPopup() {
			this.$refs.posterPopup.close()
		},
		// 生成海报
		getGoodsPoster() {
			// 活动海报信息
			let qrcode_param = {
				site_id: this.siteId
			}
			if (this.memberId) qrcode_param.suid = this.memberId
			this.$api.sendRequest({
				url: '/api/shop/poster',
				data: {
					page: '/otherpages/shop/introduce/introduce',
					qrcode_param: JSON.stringify(qrcode_param),
					// #ifdef APP-PLUS
					app_type: 'weapp',
					app_type_name: '微信小程序'
					// #endif
				},
				success: res => {
					if (res.code == 0) {
						this.poster = res.data.path
					} else {
						this.posterMsg = res.message
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.isPhone {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom);
}
.follow-and-share {
    position: fixed;
    bottom: 100rpx;
    right: 30rpx;
    background-color: rgba(0, 0, 0, 0.5);
    height: 60rpx;
    width: 60rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 50%;
    z-index: 9999;
    color: #fff;
    text {
        color: #fff;
    }
    image {
        max-width: 100%;
        max-height: 100%;
        height: 15px;
        width: 15px;
        margin-top: 5px;
    }
}
.follow-and-share-img {
    position: fixed;
    bottom: 100rpx;
    right: 30rpx;
    background-color: rgba(0, 0, 0, 0.5);
    height: 36rpx;
    width: 36rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 50%;
    z-index: 9999;
    padding: 17rpx;
}
@import "../public/css/introduce.scss";

.share-popup,
.uni-popup__wrapper-box {
    .share-title {
        line-height: 60rpx;
        font-size: $font-size-toolbar;
        padding: 15rpx 0;
        text-align: center;
    }

    .share-content {
        display: flex;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 15rpx;

        .share-box {
            flex: 1;
            text-align: center;
            z-index: 9999;
            .share-btn {
                margin: 0;
                padding: 0;
                border: none;
                line-height: 1;
                height: auto;

                text {
                    margin-top: 20rpx;
                    font-size: 24rpx;
                    display: block;
                    color: $color-title;
                }
            }

            .iconfont {
                font-size: 80rpx;
                line-height: initial;
            }

            .iconpengyouquan,
            .iconiconfenxianggeihaoyou {
                color: #07c160;
            }
        }
    }

    .share-footer {
        height: 90rpx;
        line-height: 90rpx;
        border-top: 2rpx #f5f5f5 solid;
        text-align: center;
        color: #666;
    }
}

// 海报
.poster-layer {
    .generate-poster {
        padding: 40rpx 0;

        .iconfont {
            font-size: 80rpx;
            color: #07c160;
            line-height: initial;
        }

        > view {
            text-align: center;

            &:last-child {
                margin-top: 20rpx;
            }
        }
    }

    .image-wrap {
        width: 70%;
        margin: 30px auto 20px auto;
        box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);

        image {
            width: 100%;
            height: 100%;
            height: 750rpx;
        }
    }

    .msg {
        padding: 40rpx;
    }

    .save {
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
    }

    .close {
        position: absolute;
        top: 0;
        right: 20rpx;
        width: 40rpx;
        height: 80rpx;
        font-size: 50rpx;
    }
}
</style>
